/*
* Vieb - Vim Inspired Electron Browser
* Copyright (C) 2019-2025 Jelmer van Arnhem
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with this program.  If not, see <https://www.gnu.org/licenses/>.
*/
/*
 * COLORS
*/
:root {
    /* general */
    --bg: #333;
    --fg: #eee;
    --tab-background: #444;
    --tab-suspended: #000;
    --visible-tab: #666;
    --tab-split: #f90;
    --tab-audio: #09f;
    --tab-muted: #fff;
    --tab-muted-playing: #ff3;
    --tab-crashed: #f00;
    --tab-unresponsive: var(--tab-crashed);
    --tab-scrollbar: #5ff;
    --container-background: none;
    --mode-normal-fg: #eee;
    --mode-normal-bg: none;
    --mode-command-fg: #f33;
    --mode-command-bg: none;
    --mode-insert-fg: #3f3;
    --mode-insert-bg: none;
    --mode-follow-fg: #f3f;
    --mode-follow-bg: none;
    --mode-explore-fg: #3ff;
    --mode-explore-bg: none;
    --mode-search-fg: #ff3;
    --mode-search-bg: none;
    --mode-pointer-fg: #777;
    --mode-pointer-bg: #fff;
    --mode-visual-fg: #000;
    --mode-visual-bg: #3af;
    --url-default: #666;
    --url-search: #f90;
    --url-searchwords: #fcf;
    --url-url: #3ff;
    --url-suggest: #3f3;
    --url-file: #ff9;
    --url-invalid: #f33;
    --follow-text: #111;
    --follow-url-bg: #bff;
    --follow-url-border: #7dd;
    --follow-url-hover: #7dd7;
    --follow-click-bg: #fbb;
    --follow-click-border: #d77;
    --follow-click-hover: #d777;
    --follow-insert-bg: #bfb;
    --follow-insert-border: #7d7;
    --follow-insert-hover: #7d77;
    --follow-onclick-bg: #ffb;
    --follow-onclick-border: #dd7;
    --follow-onclick-hover: #dd77;
    --follow-media-bg: #bbf;
    --follow-media-border: #77d;
    --follow-media-hover: #77d7;
    --follow-image-bg: #fbf;
    --follow-image-border: #d7d;
    --follow-image-hover: #d7d7;
    --follow-other-bg: #ddd;
    --follow-other-border: #bbb;
    --follow-other-hover: #bbb7;
    --suggestions-border: #777;
    --suggestions-bg: #444;
    --suggestions-selected: #666;
    --suggestions-searchwords: #fcf;
    --suggestions-url: #bff;
    --suggestions-file: #ffb;
    --notification-border: #111;
    --notification-date: #aaa;
    --notification-permission: #aaa;
    --notification-dialog: var(--notification-permission);
    --notification-error: #f33;
    --notification-warning: #fd0;
    --notification-info: #0cf;
    --notification-success: #3f3;
    --url-hover-fg: #000;
    --url-hover-bg: #fff9;
    --screenshot-highlight: #f90;
    --screenshot-highlight-background: #f907;
    /* special pages */
    --link-color: #0cf;
    --link-underline: #059;
    --scrollbar-bg: #444;
    --scrollbar-thumb: #bbb9;
    --button-disabled: #999;
    --code-fg: #fff;
    --code-bg: #111;
    --code-command: #f88;
    --placeholder-text: #ccc;
    --special-page-element-bg: #444;
    --special-page-element-border: #222;
    --input-unfocused: #666;
    --input-focused: #aaa;
    --download-progress-fg: #ccc;
    --download-progress-bg: #666;
    --helppage-h1: #d33;
    --helppage-h2: #f76;
    --helppage-h3: #fb9;
    --helppage-countable: #fc0;
    --helppage-range-compat: #fc0;
    --helppage-nativetheme-fg-light: #aaa;
    --helppage-nativetheme-bg-light: #fff;
    --helppage-nativetheme-fg-dark: #666;
    --helppage-nativetheme-bg-dark: #000;
    --history-current-page-highlight: var(--helppage-h1);
    /* sourceviewer */
    --syntax-fg: var(--fg);
    --syntax-bg: var(--bg);
    --syntax-keyword: #f77;
    --syntax-entity: #daf;
    --syntax-constant: #8cf;
    --syntax-string: #adf;
    --syntax-variable: #fa5;
    --syntax-comment: #89a;
    --syntax-entity-tag: #8e8;
    --syntax-markup-heading: #27e;
    --syntax-markup-list: #fc6;
    --syntax-markup-emphasis: #cde;
    --syntax-markup-addition-fg: #bfb;
    --syntax-markup-addition-bg: #041;
    --syntax-markup-deletion-fg: #fdd;
    --syntax-markup-deletion-bg: #600;
    /* failedload */
    --failedload-main-bg: var(--tab-background);
    /* filebrowser */
    --filebrowser-main-bg: var(--failedload-main-bg);
    --filebrowser-dir: var(--suggestions-file);
    --filebrowser-file: var(--suggestions-url);
    --filebrowser-breadcrumb: var(--suggestions-url);
    --filebrowser-error: var(--notification-error);
}


/*
 * GLOBAL
*/
html {width: 100%;height: 100%;margin: 0;padding: 0;}
body {color: var(--fg);background: var(--bg);font: 14px "DejaVu Sans Mono", "Courier", monospace;padding: 0;margin: 0;opacity: 0;}
#app {height: 100vh;width: 100vw;overflow: hidden;user-select: none;display: flex;flex-direction: column;opacity: 1;line-height: 1.3em;}
body:not(#app) input {background: transparent;color: var(--fg);font: inherit;width: 100%;border: .1em solid var(--input-unfocused);padding: .2em;margin-bottom: 1em;box-sizing: border-box;outline: none;height: 2em;}
body:not(#app) input:focus {border: .1em solid var(--input-focused);}
body:not(#app) kbd {background: var(--code-bg);color: var(--code-fg);padding: .1em;overflow-wrap: anywhere;}
body:not(#app) button {background: transparent;color: var(--fg);border: .1em solid var(--fg);font: inherit;}
body:not(#app) button:not(:disabled):hover {cursor: pointer;font-weight: bold;}
body:not(#app) button:disabled {border-color: var(--button-disabled);color: var(--button-disabled);}
body:not(#app) ::placeholder {color: var(--placeholder-text);}
::-webkit-scrollbar {width: 1em;background: var(--scrollbar-bg);}
::-webkit-scrollbar-thumb {background: var(--scrollbar-thumb);}


/*
 * APP
*/
/* navbar & tabs */
#navbar {z-index: 45;}
#tabs, #navbar {width: 100vw;display: flex;background: var(--bg);}
#logo {-webkit-app-region: drag;height: 1.8em;width: 1.8em;margin: .1em;min-width: 1.8em;min-height: 1.8em;}
#mode-container {display: flex;width: 7em;text-align: center;justify-content: center;}
#mode {text-transform: capitalize;font-size: 1.3em;font-weight: bold;display: flex;align-items: center;}
#search-results, #record-name, #repeat-counter, #pressed-keys {margin: auto .2em;align-items: center;display: none;}
/* modes */
#mode-container, #helppage .normal, .normal {color: var(--mode-normal-fg);background: var(--mode-normal-bg);}
[current-mode=command] #mode-container, #helppage .command, .command {color: var(--mode-command-fg);background: var(--mode-command-bg);}
[current-mode=insert] #mode-container, #helppage .insert, .insert {color: var(--mode-insert-fg);background: var(--mode-insert-bg);}
[current-mode=follow] #mode-container, #helppage .follow, .follow {color: var(--mode-follow-fg);background: var(--mode-follow-bg);}
[current-mode=explore] #mode-container, #helppage .explore, .explore {color: var(--mode-explore-fg);background: var(--mode-explore-bg);}
[current-mode=search] #mode-container, #helppage .search, .search {color: var(--mode-search-fg);background: var(--mode-search-bg);}
[current-mode=pointer] #mode-container, #helppage .pointer, .pointer {color: var(--mode-pointer-fg);background: var(--mode-pointer-bg);}
[current-mode=visual] #mode-container, #helppage .visual, .visual {color: var(--mode-visual-fg);background: var(--mode-visual-bg);}
/* tabs */
#tabs {display: flex;overflow: hidden;max-width: 100vw;width: 100vw;z-index: 2;gap: .1em;}
#tabs > span {color: var(--fg);background: var(--tab-background);display: flex;flex: 1;overflow: hidden;white-space: nowrap;height: 2em;}
#tabs > span > img {margin: auto 0 auto .25em;padding: 0;height: 1.5em;width: 1.5em;min-height: 1.5em;min-width: 1.5em;pointer-events: none;}
#tabs > span > span {margin: auto 0 auto .25em;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}
#tabs .visible-tab {background: var(--visible-tab);}
#tabs [suspended] {background: var(--tab-suspended);}
#tabs.multiple #current-tab {border-left: solid .3em var(--tab-split);}
#tabs .pinned {min-width: 2em !important;max-width: 2em;width: 2em;padding: 0;}
#tabs .pinned[media-playing], #tabs .pinned[muted] {width: 2.2em;max-width: 2.2em;}
#tabs .pinned > img {padding: 0;margin: .2em;}
#tabs .crashed {background: var(--tab-crashed);}
#tabs .unresponsive:not(.crashed)::before {border-left: solid .3em var(--tab-unresponsive);content: "";}
#tabs #current-tab.crashed {border-left: solid .3em var(--tab-split);}
#tabs [media-playing]::before {border-left: solid .3em var(--tab-audio);content: "";}
#tabs [muted]::before {border-left: solid .3em var(--tab-muted);content: "";}
#tabs [muted][media-playing]::before {border-left: solid .3em var(--tab-muted-playing);content: "";}
#tabs.scroll {overflow-x: auto;}
#tabs.wrap {flex-wrap: wrap;}
/* pages container */
.webview {position: absolute;display: none;pointer-events: none;}
#page-container {position: relative;}
#page-container, #current-page, .visible-page {display: flex;flex: 1;height: 100%;width: 100%;}
#pages.multiple .webview {border: solid .15em transparent;box-sizing: border-box;}
#pages.multiple #current-page {border-color: var(--tab-split);}
#pagelayout {display: flex;height: 100%;width: 100%;}
#pagelayout * {flex: 1;}
#pagelayout.hor, #pagelayout .hor {flex-direction: row;display: flex;}
#pagelayout.ver, #pagelayout .ver {flex-direction: column;display: flex;}
/* fullscreen */
#app.fullscreen #navbar, #app.fullscreen #tabs, #app.fullscreen .webview {display: none;}
#app.fullscreen #current-page {display: flex;border: none;width: 100vw !important;height: 100vh !important;top: 0 !important;bottom: 0 !important;left: 0 !important;right: 0 !important;}
/* conditionally hide tabs or navbar from the vieb window */
#app.tabshidden #tabs {display: none;}
#app.navigationhidden #navbar {position: absolute;top: -10em;}
#app.navigationhidden #suggest-dropdown {top: .1em;max-height: calc(100% - .2em);}
/* Nav url/search/command */
#containername {display: flex;margin: auto;height: 1.8em;align-items: center;padding: 0 .5em;background: var(--container-background);color: var(--fg);}
#url {display: inline-block;flex: 1;border: solid .1em var(--url-default);margin: .1em;background: transparent;color: var(--fg);outline: none;font: inherit;min-width: 0;padding: .1em;width: 0;cursor: default;}
#url.search {border-color: var(--url-search);}
#url.searchwords {border-color: var(--url-searchwords);}
#url.url {border-color: var(--url-url);}
#url.suggest {border-color: var(--url-suggest);}
#url.file {border-color: var(--url-file);}
#url.invalid {border-color: var(--url-invalid);}
/* follow */
#app #follow {position: absolute;display: none;z-index: 3;height: 100%;width: 100%;pointer-events: none;}
#app #follow * {pointer-events: auto;}
#app #follow .follow-url, #app #follow .follow-inputs-click, #app #follow .follow-inputs-insert, #app #follow .follow-onclick, #app #follow .follow-media, #app #follow .follow-image, #app #follow .follow-other {position: absolute;color: var(--follow-text);padding: 0 .1em;}
.follow-url-border, .follow-inputs-click-border, .follow-inputs-insert-border, .follow-onclick-border, .follow-media-border, .follow-image-border, .follow-other-border {position: absolute;box-sizing: border-box;}
.follow-url {background: var(--follow-url-bg);border: solid .15em var(--follow-url-border);}
.follow-inputs-click {background: var(--follow-click-bg);border: solid .15em var(--follow-click-border);}
.follow-inputs-insert {background: var(--follow-insert-bg);border: solid .15em var(--follow-insert-border);}
.follow-onclick {background: var(--follow-onclick-bg);border: solid .15em var(--follow-onclick-border);}
.follow-media {background: var(--follow-media-bg);border: solid .15em var(--follow-media-border);}
.follow-image {background: var(--follow-image-bg);border: solid .15em var(--follow-image-border);}
.follow-other {background: var(--follow-other-bg);border: solid .15em var(--follow-other-border);}
.follow-url-border {border: solid .07em var(--follow-url-border);}
.follow-inputs-click-border {border: solid .07em var(--follow-click-border);}
.follow-inputs-insert-border {border: solid .07em var(--follow-insert-border);}
.follow-onclick-border {border: solid .07em var(--follow-onclick-border);}
.follow-media-border {border: solid .07em var(--follow-media-border);}
.follow-image-border {border: solid .07em var(--follow-image-border);}
.follow-other-border {border: solid .07em var(--follow-other-border);}
/* suggestions */
#suggest-dropdown {z-index: 30;position: absolute;top: .1em;left: .1em;width: calc(100% - .2em);background: var(--suggestions-border);max-height: calc(100% - .2em);overflow-y: auto;display: flex;flex-direction: column;}
#suggest-dropdown div {flex-grow: 1;flex-shrink: 0;display: flex;padding: .4em;margin: .1em;background: var(--suggestions-bg);overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}
#suggest-dropdown div .title, #suggest-dropdown div .file, #suggest-dropdown div .url {margin: auto .5em auto 0;min-width: 0;text-overflow: ellipsis;overflow: hidden;}
#suggest-dropdown div .title {flex-shrink: 0;max-width: 50%;}
#suggest-dropdown div .icon {height: 1.5em;width: 1.5em;margin-right: .5em;}
#suggest-dropdown div .url {color: var(--suggestions-url);}
#suggest-dropdown div .file {color: var(--suggestions-file);}
#suggest-dropdown div .searchwords {color: var(--suggestions-searchwords);}
#suggest-dropdown div.selected {background: var(--suggestions-selected);}
#screenshot-highlight {display: none;z-index: 35;position: absolute;box-sizing: content-box;border: solid var(--screenshot-highlight) .5em;background-color: var(--screenshot-highlight-background);}
/* mouse related */
#mode-suggestions {background: var(--bg);max-height: 0;position: absolute;left: 2em;top: 2em;z-index: 37;overflow: hidden;display: inline-block;width: 7em;text-transform: capitalize;display: flex;flex-direction: column;}
#mode-suggestions:hover {max-height: 100vw;}
#app.mouse-modeselector #mode-container:hover #mode-suggestions {max-height: 100vw;}
#mode-suggestions div {font-size: 1.3em;}
#app.mouse-suggestselect #suggest-dropdown div:hover, #mode-suggestions div:hover, #app.mouse-switchtab #tabs > span:hover {font-weight: bold;cursor: pointer;}
#app[current-mode=insert].mouse-pageininsert .webview, #app:not([current-mode=insert]).mouse-pageoutsideinsert .webview {pointer-events: all;}
#app[current-mode=command].mouse-url #url, #app[current-mode=follow].mouse-url #url, #app[current-mode=explore].mouse-url #url, #app[current-mode=search].mouse-url #url {cursor: text;}
#app:not([current-mode]).mouse-toexplore #url, #app[current-mode=normal].mouse-toexplore #url, #app[current-mode=insert].mouse-toexplore #url, #app[current-mode=pointer].mouse-toexplore #url, #app[current-mode=visual].mouse-toexplore #url {cursor: text;}
.mouse-follow .follow-url-border.hover {background: var(--follow-url-hover);cursor: pointer;}
.mouse-follow .follow-inputs-click-border.hover {background: var(--follow-click-hover);cursor: pointer;}
.mouse-follow .follow-inputs-insert-border.hover {background: var(--follow-insert-hover);cursor: pointer;}
.mouse-follow .follow-onclick-border.hover {background: var(--follow-onclick-hover);cursor: pointer;}
.mouse-follow .follow-media-border.hover {background: var(--follow-media-hover);cursor: pointer;}
.mouse-follow .follow-image-border.hover {background: var(--follow-image-hover);cursor: pointer;}
.mouse-follow .follow-other-border.hover {background: var(--follow-other-hover);cursor: pointer;}
.mouse-follow .hover + .follow-url, .mouse-follow .hover + .follow-inputs-click, .mouse-follow .hover + .follow-inputs-insert, .mouse-follow .hover + .follow-onclick, .mouse-follow .hover + .follow-media, .mouse-follow .hover + .follow-image, .mouse-follow .hover + .follow-other {cursor: pointer;}
/* mouse drag region */
#app.mousedisabled-drag:not(.mouse-modeselector) #mode-container {-webkit-app-region: drag;}
#app.mousedisabled-drag:not(.mouse-toexplore):not(.mouse-url) #url {-webkit-app-region: drag;}
#app.mousedisabled-drag:not(.mouse-suggestselect) #suggest-dropdown {-webkit-app-region: drag;}
#app.mousedisabled-drag:not(.mouse-suggestselect):not(.mouse-url):not(.mouse-toexplore):not(.mouse-modeselector) #navbar {-webkit-app-region: drag;}
#app[current-mode=command].mousedisabled-drag:not(.mouse-url) #url, #app[current-mode=explore].mousedisabled-drag:not(.mouse-url) #url, #app[current-mode=search].mousedisabled-drag:not(.mouse-url) #url {-webkit-app-region: drag;}
#app:not([current-mode]).mousedisabled-drag:not(.mouse-toexplore) #url, #app[current-mode=normal].mousedisabled-drag:not(.mouse-toexplore) #url, #app[current-mode=insert].mousedisabled-drag:not(.mouse-toexplore) #url, #app[current-mode=pointer].mousedisabled-drag:not(.mouse-toexplore) #url, #app[current-mode=visual].mousedisabled-drag:not(.mouse-toexplore) #url {-webkit-app-region: drag;}
#app[current-mode=insert].mousedisabled-drag:not(.mouse-pageininsert) .webview, #app:not([current-mode=insert]).mousedisabled-drag:not(.mouse-pageoutsideinsert) .webview {-webkit-app-region: drag;}
#app.mousedisabled-drag #url-hover, #app.mousedisabled-drag #mapsuggest, #app.mousedisabled-drag #repeat-counter, #app.mousedisabled-drag #pressed-keys, #app.mousedisabled-drag #containername {-webkit-app-region: drag;}
#app.mousedisabled-drag:not(.mouse-screenshotframe) #screenshot-highlight {-webkit-app-region: drag;}
#app.mousedisabled-drag:not(.mouse-notification) #notifications {-webkit-app-region: drag;}
#app.mousedisabled-drag:not(.mouse-switchtab):not(.mouse-newtab):not(.mouse-closetab):not(.mouse-scrolltabs) #tabs {-webkit-app-region: drag;}
#app.mousedisabled-drag:not([class^='mouse-']):not([class*=' mouse-']) {-webkit-app-region: drag;}
#app.mousedisabled-drag:not(.mouse-follow) .follow-url, #app.mousedisabled-drag:not(.mouse-follow) .follow-inputs-click, #app.mousedisabled-drag:not(.mouse-follow) .follow-inputs-insert, #app.mousedisabled-drag:not(.mouse-follow) .follow-onclick, #app.mousedisabled-drag:not(.mouse-follow) .follow-media, #app.mousedisabled-drag:not(.mouse-follow) .follow-image, #app.mousedisabled-drag:not(.mouse-follow) .follow-other {-webkit-app-region: drag;}
#app.mousedisabled-drag:not(.mouse-follow) .follow-url-border, #app.mousedisabled-drag:not(.mouse-follow) .follow-inputs-click-border, #app.mousedisabled-drag:not(.mouse-follow) .follow-inputs-insert-border, #app.mousedisabled-drag:not(.mouse-follow) .follow-onclick-border, #app.mousedisabled-drag:not(.mouse-follow) .follow-media-border, #app.mousedisabled-drag:not(.mouse-follow) .follow-image-border, #app.mousedisabled-drag:not(.mouse-follow) .follow-other-border {-webkit-app-region: drag;}
/* notifications & map suggestions */
#notifications, #app #mapsuggest {display: flex;position: absolute;flex-direction: column;z-index: 5;}
#notifications {width: calc(100% - 1.4em);gap: .5em;pointer-events: none;}
#notifications > span, #app #mapsuggest {background: var(--bg);padding: .5em;display: flex;max-width: calc(100% - 2.6em);max-height: calc(100% - 2.6em);border: .1em solid var(--notification-border);overflow-wrap: anywhere;white-space: pre-wrap;overflow-y: auto;}
#notifications > span {width: 33%;min-width: 33%;pointer-events: auto;}
#notifications > span.permission {color: var(--notification-permission);}
#notifications > span.dialog {color: var(--notification-dialog);}
#notifications > span.error {color: var(--notification-error);}
#notifications > span.warning, #app #mapsuggest span.warning {color: var(--notification-warning);}
#notifications > span.info, #app #mapsuggest span.info {color: var(--notification-info);}
#notifications > span.success, #app #mapsuggest span.success {color: var(--notification-success);}
#notifications.bottomright {align-items: end;justify-content: end;}
#notifications.bottomleft {align-items: start;justify-content: end;}
#notifications.topright {align-items: end;justify-content: start;}
#notifications.topleft {align-items: start;justify-content: start;}
.bottomright {right: .7em;bottom: .7em;}
.bottomleft {left: .7em;bottom: .7em;}
.topright {right: .7em;top: .7em;}
.topleft {left: .7em;top: .7em;}
/* loading-progress */
#loading-progress {display: none;position: absolute;width: 100%;height: .2em;animation: 8s infinite pointer;}
/* scrollbar for overflowing tabs */
#tabs::-webkit-scrollbar {height: .2em;}
#tabs::-webkit-scrollbar-thumb {background: var(--tab-scrollbar);}
/* context menu */
#context-menu {padding: 0;margin: 0;background: var(--suggestions-bg);position: fixed;z-index: 50;white-space: nowrap;max-height: 100vh;overflow-y: auto;}
#context-menu:not(:empty) {border: .1em solid var(--suggestions-border);}
#context-menu > .menu-item {padding: .1em .8em;margin: 0;cursor: pointer;}
#context-menu > .menu-item.selected {background: var(--suggestions-selected);}
#context-menu > .menu-group {padding: .2em 0 0 0;font-weight: bold;}
/* other */
@keyframes pointer {0% {background: #f007;} 17% {background: #ff07;} 33% {background: #0f07;} 49% {background: #0ff7;} 66% {background: #00f7;} 83% {background: #f0f7;} 100% {background: #f007;}}
#app #pointer {display: none;position: absolute;height: 1em;width: .7em;z-index: 40;backdrop-filter: invert(100%);animation: 1s infinite pointer;pointer-events: none;}
#app[current-mode=pointer] #pointer {display: block;}
#app[current-mode=visual] #pointer {display: block;}
#url-hover {display: none;position: absolute;background: var(--url-hover-bg);color:var(--url-hover-fg);bottom: 0;left: 0;right: 0;pointer-events: none;padding: .1em;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;width: fit-content;margin: auto;max-width: 80vw;text-align: center;z-index: 4;}


/*
 * SPECIAL PAGES
*/
.specialpage {width: 90vw;margin: auto;}
.specialpage a {color: var(--link-color);white-space: nowrap;overflow: hidden;}
.specialpage a:not([class]) {text-decoration: var(--link-underline) underline;}
.specialpage a[href^="https"]::after {background: url(../img/topright.png) no-repeat 0 0;background-size: .5em 1em;content: "";padding-right: .5em;}
.specialpage a:hover {text-decoration: var(--link-color) underline;}
.specialpage h1 {font-size: 2em;margin: 1em 0;padding: 0;}
.specialpage img {height: 1.9em;margin: .5em;float: right;}
.specialpage *[onclick] {cursor: pointer;}
.specialpage #remove-all {height: 2.4em;margin: .2em;cursor: pointer;}
.specialpage #list {display: flex;flex-direction: column;gap: .7em;margin: .7em 0;}
/* cookies */
#cookiespage .cookie {background: var(--special-page-element-bg);padding: .35em;display: flex;border: .1em solid var(--special-page-element-border);}
#cookiespage .cookie * {overflow: hidden;white-space: nowrap;text-overflow: ellipsis;width: 33%;padding: .2em 0;}
#cookiespage .remove {height: 1em;width: 1em;margin: auto 0;cursor: pointer;}
/* downloads */
#downloadspage .download {background: var(--special-page-element-bg);margin-bottom: 1em;border: .1em solid var(--special-page-element-border);}
#downloadspage .title {margin: .4em;font-size: 1.5em;width: calc(100% - 4em);cursor: pointer;overflow-wrap: anywhere;}
#downloadspage progress {-webkit-appearance: none;appearance: none;width: calc(100% - 1em);margin: .5em;}
#downloadspage progress::-webkit-progress-value {background: var(--download-progress-fg);}
#downloadspage progress::-webkit-progress-bar {background: var(--download-progress-bg);}
#downloadspage .misc {display: flex;margin: .5em;flex-direction: column;width: calc(100% - 1em);}
#downloadspage .filelocation {cursor: pointer;}
#downloadspage img {cursor: pointer;}
/* help */
#helppage {margin: 3vw;width: auto;line-height: 2;}
#helppage main {max-width: 65em;margin: auto;}
#helppage .header, #helppage .header > div {font-size: 5vw;display: flex;flex: 1;justify-content: center;}
#helppage .header > div > img {height: 10vw;margin: 0 1em 0 0;}
#helppage .cheatsheet {float: none;height: auto;width: 100%;filter: contrast(.5) invert() contrast(4) hue-rotate(180deg) saturate(4);}
#helppage a {overflow-wrap: anywhere;}
#helppage li {line-height: 1.5em;}
#helppage .section {display: flex;flex-wrap: wrap;align-items: center;}
#helppage .section h1, .section h2, .section h3, .section h4, .section h5, .section h6 {margin: 0;overflow-wrap: anywhere;}
#helppage .section .spacer {flex-grow: 1;}
#helppage .section > a {margin: auto 0;overflow-wrap: anywhere;text-align: right;}
#helppage h1 {font-size: 3em;margin: .7em 0 .5em;color: var(--helppage-h1);}
#helppage h2 {font-size: 2em;margin: .7em 0;color: var(--helppage-h2);}
#helppage h3 {font-size: 1.5em;margin: .7em 0;color: var(--helppage-h3);}
#helppage h4 {font-size: 1.25em;margin: .7em 0;}
#helppage h5, #helppage h6 {font-size: 1;margin: .7em 0;}
#helppage .setting-status {display: flex;flex-wrap: wrap;}
#helppage .setting-status > * {margin: 0 .5em;overflow-wrap: anywhere;max-width: calc(100vw - 3em);}
#helppage .map-status * {display: block;}
#helppage .countable {height: 2em;margin: 0 1em;color: var(--helppage-countable);}
#helppage .range-compat {height: 2em;margin: 0 1em;color: var(--helppage-range-compat);}
#helppage .command-block {color: var(--code-command);white-space: normal;overflow-wrap: anywhere;background: var(--code-bg);padding: .1em;}
#helppage .url-search {color: var(--url-search);}
#helppage .url-url {color: var(--url-url);}
#helppage .url-searchwords {color: var(--url-searchwords);}
#helppage .url-suggest {color: var(--url-suggest);}
#helppage .url-file {color: var(--url-file);}
#helppage .follow-url {background: var(--follow-url-bg);color: var(--follow-text);}
#helppage .follow-inputs-click {background: var(--follow-click-bg);color: var(--follow-text);}
#helppage .follow-inputs-insert {background: var(--follow-insert-bg);color: var(--follow-text);}
#helppage .follow-onclick {background: var(--follow-onclick-bg);color: var(--follow-text);}
#helppage .follow-media {background: var(--follow-media-bg);color: var(--follow-text);}
#helppage .follow-image {background: var(--follow-image-bg);color: var(--follow-text);}
#helppage .follow-other {background: var(--follow-other-bg);color: var(--follow-text);}
#helppage .example-buttons {margin: 1em;}
#helppage .example-buttons button {font-size: 1em;margin: .5em 2em;padding: .5em 2em;background: transparent;cursor: pointer;}
#helppage .nowrap, #helppage .nowrap.command-block {white-space: nowrap;}
#helppage .nativetheme {display: none;}
#helppage .nativetheme.light {color: var(--helppage-nativetheme-fg-light);background: var(--helppage-nativetheme-bg-light);}
#helppage .nativetheme.dark {color: var(--helppage-nativetheme-fg-dark);background: var(--helppage-nativetheme-bg-dark);}
@media (prefers-color-scheme: light) {
    #helppage .nativetheme.light {display: inline-block;}
}
@media (prefers-color-scheme: dark) {
    #helppage .nativetheme.dark {display: inline-block;}
}
/* history */
#historypage #scanning-progress {margin-bottom: 1em;}
#historypage #hist-container {display: flex;}
#historypage #pages {display: flex;align-items: center;margin-right: auto;overflow: auto;max-width: 100%;}
#historypage #pages button {border: solid .1em var(--input-unfocused);margin: .2em;padding: 0 .5em;}
#historypage #perpage {min-width: 12em;width: 20vw;margin: auto 0 auto 1em;}
#historypage .current {color: var(--history-current-page-highlight);}
#historypage .hist-entry {background: var(--special-page-element-bg);padding: .35em;border: .1em solid var(--special-page-element-border);}
#historypage .hist-entry .hist-date {width: auto;color: var(--notification-date);margin-right: 1em;}
#historypage .hist-entry span {display: inline-block;width: calc(100% - 16em);overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}
#historypage .hist-entry a {display: block;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;width: 100%;}
#historypage img {height: 1.5em;float: right;margin: .35em .9em;cursor: pointer;}
#historypage .hist-entry img {height: 1em;margin: .1em;}
#historypage .hist-entry .favicon {float: none;margin: 0 .3em .1em 0;cursor: auto;}
#historypage .hist-entry.marked {background: var(--special-page-element-border);}
/* newtab */
#newtabpage {display: none;flex-direction: column;height: 100vh;}
#newtabpage main {margin: auto;max-width: 80vw;}
#newtabpage img {height: 2em;width: 2em;min-height: 2em;min-width: 2em;margin: 0 .5em 0 0;}
#newtabpage a {display: flex;padding: .5em;font-size: 1.4em;text-decoration: none;max-width: 80vw;align-items: center;}
#newtabpage a div {display: flex;flex-direction: column;}
#newtabpage a div, a div * {overflow: hidden;white-space: wrap;text-overflow: ellipsis;}
#newtabpage main > div {display: flex;flex-wrap: wrap;overflow: hidden;}
#newtabpage p {text-align: center;}
#favorites, #topsites {margin: 1em 0;display: none;max-width: 80vw;min-width: 42em;width: auto;flex-grow: 1;flex-basis: 50%;}
#newtabpage small {font-size: .7em;text-decoration: underline;}
/* notifications */
#notificationspage .notification {background: var(--special-page-element-bg);border: .1em solid var(--notification-border);padding: .35em;overflow-wrap: anywhere;white-space: pre-wrap;}
#notificationspage .date {color: var(--notification-date);}
#notificationspage .permission {color: var(--notification-permission);}
#notificationspage .dialog {color: var(--notification-dialog);}
#notificationspage .error {color: var(--notification-error);}
#notificationspage .warning {color: var(--notification-warning);}
#notificationspage .info {color: var(--notification-info);}
#notificationspage .success {color: var(--notification-success);}
#notificationspage .filelocation {cursor: pointer;}
/* version */
#versionpage {display: flex;width: 80vw;height: 100vh;text-align: center;}
#versionpage #title {font-size: 2.5em;}
#versionpage #subtitle {font-size: 1.5em;}
#versionpage .header {display: flex;flex-direction: column;margin: auto;align-items: center;}
#versionpage .header > img {width: 30vmin;height: 30vmin;margin: auto;}
#versionpage .info {width: 42em;max-width: 80vw;}
#versionpage #update-check {margin: .7em;}
#versionpage #version-links {display: flex;flex-wrap: wrap;justify-content: center;}
#versionpage #version-links a {margin: .5em;}


/*
 * POPUPS
*/
.popup {box-sizing: border-box;height: 100%;width: 100%;overflow: hidden;user-select: none;border: .1em solid var(--notification-border);}
/* login & prompt */
#loginpopup, #promptpopup {padding: 1em;}
#loginpopup *, #promptpopup * {pointer-events: none;}
#loginpopup p, #promptpopup p {word-wrap: break-word;overflow: hidden;}
/* notification */
#notificationpopup #notification {padding: 1em;height: calc(100% - 4.1em);overflow-wrap: break-word;overflow-x: hidden;overflow-y: auto;line-height: 1em;user-select: text;white-space: pre-wrap;}
#notificationpopup footer {font-size: 1em;line-height: 2em;height: 2em;position: fixed;left: 0;bottom: 0;width: 100vw;border: .1em solid var(--notification-border);}
/* display */
#displaypopup #screens {display: flex;flex-wrap: wrap;max-height: calc(100% - 5.5em);overflow: auto;gap: 1em;padding: 1em;justify-content: space-evenly;}
#displaypopup #title {display: flex;height: 1em;margin: 1em;line-height: 1;}
#displaypopup h3 {height: 1.2em;margin: 0 1em 0 0;}
#displaypopup #audio-enabled, #displaypopup #echo-enabled {flex: 0;height: 1em;margin: .1em;padding: 0;}
#displaypopup label {margin: 0 1em 0 .5em;}
#displaypopup .screen {display: flex;flex-direction: column;cursor: pointer;}
#displaypopup .screen:hover {font-weight: bold;}
#displaypopup .screen-key {text-transform: uppercase;text-align: center;}
#displaypopup .screen-preview {flex: 1;}
#displaypopup .screen-preview, #displaypopup .screen-icon {object-fit: contain;max-height: 100%;max-width: 100%;margin: auto;}
#displaypopup .screen-icon {height: 5em;width: 5em;}
#displaypopup .screen-title {display: -webkit-box;text-overflow: ellipsis;overflow: hidden;width: 20em;line-height: 1;white-space: wrap;overflow-wrap: anywhere;-webkit-box-orient: vertical;-webkit-line-clamp: 4;height: 4em;padding-top: .5em;}


/*
 * READERVIEW
*/
#readerview {margin: auto;max-width: 65em;padding: 2vw;}
#readerview img {max-width: 100%;}
#readerview a {color: var(--link-color);}


/*
 * MARKDOWNVIEWER
*/
#markdownviewer {margin: auto;max-width: 65em;padding: 2vw;}
#markdownviewer img {max-width: 100%;}
#markdownviewer a {color: var(--link-color);}


/*
 * SOURCEVIEWER
*/
.hljs {color: var(--syntax-fg);background: var(--syntax-bg);}
.hljs-doctag, .hljs-keyword, .hljs-meta .hljs-keyword, .hljs-template-tag, .hljs-template-variable, .hljs-type, .hljs-variable.language_ {color: var(--syntax-keyword);}
.hljs-title, .hljs-title.class_, .hljs-title.class_.inherited__, .hljs-title.function_ {color: var(--syntax-entity);}
.hljs-attr, .hljs-attribute, .hljs-literal, .hljs-meta, .hljs-number, .hljs-operator, .hljs-variable, .hljs-selector-attr, .hljs-selector-class, .hljs-selector-id {color: var(--syntax-constant);}
.hljs-regexp, .hljs-string, .hljs-meta .hljs-string {color: var(--syntax-string);}
.hljs-built_in, .hljs-symbol {color: var(--syntax-variable);}
.hljs-comment, .hljs-code, .hljs-formula {color: var(--syntax-comment);}
.hljs-name, .hljs-quote, .hljs-selector-tag, .hljs-selector-pseudo {color: var(--syntax-entity-tag);}
.hljs-subst {color: var(--syntax-markup-emphasis);}
.hljs-section {color: var(--syntax-markup-heading);font-weight: bold;}
.hljs-bullet {color: var(--syntax-markup-list);}
.hljs-emphasis {color: var(--syntax-markup-emphasis);font-style: italic;}
.hljs-strong {color: var(--syntax-markup-emphasis);font-weight: bold;}
.hljs-addition {color: var(--syntax-markup-addition-fg);background: var(--syntax-markup-addition-bg);}
.hljs-deletion {color: var(--syntax-markup-deletion-fg);background: var(--syntax-markup-deletion-bg);}

/*
 * FAILEDLOAD
*/
#failedload {display: flex;line-height: 2;height: 100vh;width: 100%;}
#failedload main {margin: auto;width: 50vw;padding: 3em;background: var(--failedload-main-bg);overflow: hidden;text-overflow: ellipsis;}
#failedload a {color: var(--link-color);}
#failedload h2 {font-size: 2em;margin: 0 0 .5em;}
#failedload h3 {font-size: 1.2em;margin: 1em 0;}

/*
 * FILEBROWSER
*/
#filebrowser {display: flex;line-height: 1.5;height: 100vh;width: 100%;}
#filebrowser main {margin: 3em auto;width: 50vw;padding: 3em;background: var(--filebrowser-main-bg);overflow: visible;text-overflow: ellipsis;height: fit-content;}
#filebrowser h2 {font-size: 2em;margin: 0 0 1em;display: flex;flex-flow: wrap;}
#filebrowser button.dir, #filebrowser button.file, #filebrowser button.breadcrumb {display: block;padding: 0;border: none;}
#filebrowser .dir, #filebrowser .file {cursor: pointer;margin: .7em;line-break: anywhere;}
#filebrowser .dir {font-weight: bold;color: var(--filebrowser-dir);}
#filebrowser .file {color: var(--filebrowser-file);}
#filebrowser .breadcrumb {color: var(--filebrowser-breadcrumb);cursor: pointer;}
#filebrowser .error {color: var(--filebrowser-error);}


/*
 * TOC
*/
#toc {position: fixed;min-width: 10em;width: auto;max-width: 60vw;right: 2em;top: 2em;color: var(--fg);background: var(--bg);border: solid 1px var(--fg);padding: 0;max-height: 90vh;overflow: auto;line-height: 1;pointer-events: all;}
#toc h1 {margin: .7em;font-size: 2em;color: var(--fg);}
#toc ul {padding-inline-start: 1.8em;padding-inline-end: .5em;}
#toc a {color: var(--link-color);}
#toc > a {display: block;padding: 0 1.8em;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}
